<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../node_modules/vue/dist/vue.js"></script>
</head>
<body>
    

    <div id="app">


        <select name="city" v-model="selected">
            <option value="">--请选择--</option>
            <option v-for="(item, index) in citys">
                {{ item }}
            </option>
        </select>

        <hr>

        <h1 v-if="selected=='福州'">选择的城市为福州</h1>
        <h1 v-else-if="selected=='泉州'">选择的城市为厦门</h1>
        <h1 v-else-if="selected=='厦门'">选择的城市为泉州</h1>
        <h1 v-else-if="selected=='莆田'">选择的城市为莆田</h1>
        <h1 v-else-if="selected=='漳州'">选择的城市为漳州</h1>
        <h1 v-else>未选择</h1>

    </div>

    <script>

        new Vue({
            el: '#app',
            data: {
                citys: ['福州', '厦门', '泉州', '莆田', '漳州'],
                selected: ''
            }
        })


    </script>

</body>
</html>